import { useCallback } from 'react';

import pauseRecorder from '@/images/recorder/pause_recorder.svg';
import startRecorder from '@/images/recorder/start_recorder.svg';
import triangle from '@/images/recorder/triangle.svg';
import type { RecorderState } from '@/pages/recorder';

import styles from './index.less';
const Index = ({
  status,
  onChange = () => {}
}: {
  status: RecorderState;
  onChange?: (status: RecorderState) => void;
}) => {
  const renderRecorder = useCallback(() => {
    switch (status) {
      case 'ready':
        return (
          <img
            src={startRecorder}
            width={95}
            onClick={() => {
              onChange('start');
            }}
          />
        );
      case 'start':
        return (
          <img
            src={pauseRecorder}
            width={95}
            onClick={() => {
              onChange('pause');
            }}
          />
        );
      case 'recording':
        return (
          <img
            src={pauseRecorder}
            width={95}
            onClick={() => {
              onChange('pause');
            }}
          />
        );
      case 'pause':
        return (
          <div className={styles.pauseStatus}>
            <div className={styles.continue}>
              <img
                src={triangle}
                width={24}
                onClick={() => {
                  onChange('recording');
                }}
              />
            </div>
            <div className={styles.divideLine}></div>
            <div
              className={styles.stop}
              onClick={() => {
                onChange('ready');
              }}
            ></div>
          </div>
        );
    }
  }, [status]);
  return (
    <div className={styles.recordingBox}>
      {renderRecorder()}
      {/* <div className={styles.recordingBox}>
        <div className={styles.circle}></div>
      </div> */}
    </div>
  );
};
export default Index;
